<!-- components/GoodsCard.vue -->
<template>
  <view class="goods-card">
    <!-- 特殊标识 -->
   <!-- <view v-if="isSpecial" class="special-tag">
      <u-tag :text="specialText" shape="circle" size="mini" />
    </view> -->
    
    <up-lazy-load 
      :image="data.image" 
      border-radius="8"
      height="300rpx"
    />
    
    <view class="content">
      <view class="title">{{ data.title }}</view>
      <view class="foot flex-between">
      	<view class="price-wrapper">
      	  <text class="current">{{ data.price }}</text>
      	  <text class="original" v-if="data.oldPrice">{{ data.oldPrice }}</text>
      	</view>
		<view class="count-wrapper">
			<text>{{data.count}}</text>
		</view>
      </view>
    </view>
    
    <!-- <u-icon
      name="close-circle-fill"
      color="#fa3534"
      size="34"
      class="close-icon"
      @click="$emit('remove')"
    /> -->
  </view>
</template>

<script setup>
	import {computed} from 'vue'
	defineProps({
	  data: {
		type: Object,
		required: true
	  },
	  isSpecial: {
		type: Boolean,
		default: false
	  },
	  count:{
		  type:String,
		  default:'已售1518'
	  }
	})

	const specialText = computed(() => 
	  props.data.title.includes('爆款') ? '热卖' : '新品'
	)
</script>

<style lang="scss" scoped>

.goods-card {
  background: white;
  border-radius: 16rpx;
  margin: 10rpx;
  position: relative;
  
  .special-tag {
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    z-index: 2;
  }
  
  .content {
    padding: 21rpx 17rpx;
    
    .title {
      font-size: 26rpx;
      color: #333333;
    }
    .foot{
		padding-top: 21rpx;
	}
    .price-wrapper {
		
      .current {
        color: #e4393c;
        font-size: 26rpx;
        margin-right: 15rpx;
      }
      
      .original {
        color: #999;
        font-size: 22rpx;
        text-decoration: line-through;
      }
    }
	.count-wrapper{
		font-size: 22rpx;
		color: #999999;
	}
  }
  
  .close-icon {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
  }
}
</style>